<template>
<div>
	<el-row type="flex" class="row-bg" justify="space-between">

	<el-col :span="6" class="pointer"  @click.native="chooseMap">
		<img src="../../assets/logo2.png" width="52" 
		height="38" class="mt15 mr15 fl">
		<div class="fl logo" >
			<!-- 网格员综合管理系统 -->
			智能网格员管理平台
		</div> 
	</el-col>

	<el-col :span="16" class="text-center">
	<!-- <div class="fl"> -->
		<el-menu
		:default-active="activeIndex2"
		class="mt10 text-center"
		mode="horizontal"
		background-color="#083749"
		text-color="#fff"
		active-text-color="#27CEBF">
			<el-submenu v-for="(item, index) in menuList" :index="index + ''" :key="index"
			popper-class="pc"
			>
				
				<template slot="title">
					<i style="color:#28b47c;" :class="item.icon"></i>
					{{item.name}}
				</template>
				<el-menu-item v-for="(item1, index1) in item.list" 
				:index="index + '_' + index1"
				@click.native="chooseMenu(item1)"
				>{{item1.name}}</el-menu-item>
			</el-submenu>

			<el-menu-item index="400" 
				@click.native="chooseMap()">
				<i style="color:#28b47c;" class="el-icon-map-location"
				
				></i>
				地图
			</el-menu-item>
		</el-menu>
	<!-- </div> -->
	</el-col>

	<el-col :span="2">
		<div class="fr out mr5 pointer ml5" @click="logout">
			<i class="el-icon-switch-button"></i>
			退出
		</div>
		<div class="fr out" style="line-height:22px;">
			{{userInfo.name}}
		</div>
	</el-col>
	</el-row>

</div>
</template>

<script>

import { mapGetters } from 'vuex';

export default {
	
	name : 'header1',
	
	data () {
		return {
		  	activeIndex2 : '0',

		  	pc : {
		  		color : 'red',
		  	}
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
        	'menuList', 
        	'userInfo',
      	]),
	},

	methods : {
		chooseMenu (item) {
			console.log(item);
			this.$router.push({ 
				name: item.href,
			});
		},

		chooseMap () {

			this.$router.push({ 
				name: 'dashboard',
			});

			console.log(this.$router);


			//this.$router.go(0);
		},

		logout () {

			const para = {
				fun : 'logout',
				cb : res => {
					this.$router.push({ 
						name: 'login', 
					});
				}
			};
			this.$http(para);
		},
	},

	watch : {
	    '$route': function (to, from) {
	        console.log(to);
	        console.log(from);
	　　}
	},

	beforeRouteEnter (to, from, next) {
	    // 在渲染该组件的对应路由被 confirm 前调用
	    // 不！能！获取组件实例 `this`
	    // 因为当守卫执行前，组件实例还没被创建
	    console.log('1111');
	},
	beforeRouteUpdate (to, from, next) {
	    // 在当前路由改变，但是该组件被复用时调用
	    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
	    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
	    // 可以访问组件实例 `this`
	    console.log('2222');
	},
	beforeRouteLeave (to, from, next) {
	    // 导航离开该组件的对应路由时调用
	    // 可以访问组件实例 `this`
	    console.log('3333');
	},

	mounted () {
	},

}
</script>

<style scoped>
.logo {
	width: 230px;
	height: 70px;
	color: #fff;
	font-size: 24px;
	margin-top: 18px;
}

.out {
	padding-top: 28px;
	margin-right: 0px;
	font-size:16px;
	font-weight:400;
	color:rgba(253,253,253,1);
}

.out1 {
	margin-top: 25px;
	margin-right: 10px;
	font-size:18px;
	font-weight:400;
	color:rgba(253,253,253,1);
}

.pc {
	color : red;
}
</style>
